<template>
  <div class="container">
    <van-list v-model="Resultloading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell class="van-multi-ellipsis--l2" v-for="(item,index) in resultList" :key="index" :title="item.title" @click="$router.push('/article/'+item.art_id)" />
    </van-list>
  </div>
</template>
<script>
import { getSearchResult } from '@/api/search.js'
export default {
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      Resultloading: false,
      finished: false,
      resultList: [],
      page: 1,
      per_page: 10
    }
  },
  methods: {
    async onLoad() {
      const { data: res } = await getSearchResult({
        q: this.searchText,
        page: this.page,
        per_page: this.per_page
      })
      const Results = res.data.results
      this.resultList.push(...Results)
      this.Resultloading = false
      if (Results.length) {
        this.page++
      } else {
        this.finished = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  position: fixed;
  top: 54px;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
</style>
